<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"/>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// 编辑器插件plugins  'lists image media table wordcount paste code imagetools link advlist autosave fullscreen'
import 'tinymce/plugins/searchreplace'// 列表插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/wordcount'// 字数统计插件
import 'tinymce/plugins/paste'// 粘贴插件
import 'tinymce/plugins/code'// 源代码
import 'tinymce/plugins/codesample'// 源代码示例
import 'tinymce/plugins/imagetools'// 字数统计插件
import 'tinymce/plugins/link'// 链接插件
import 'tinymce/plugins/advlist'// 高级列表插件
import 'tinymce/plugins/autosave'// 自动保存插件
import 'tinymce/plugins/fullscreen'// 全屏插件

export default {
  name: 'TinymceEditor',
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'searchreplace lists image media table wordcount paste code codesample imagetools link advlist autosave fullscreen'
    },
    toolbar: {
      type: [String, Array],
      default: 'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor fontsizeselect backcolor fullscreen paste'
    },
    height: {
      type: Number,
      default: 300
    },
    imagesUploadUrl: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: 'file'
    }
  },
  data() {
    return {
      init: {
        language_url: 'tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: 'tinymce/skins/ui/oxide',
        content_css: 'tinymce/skins/content/default/content.css',
        height: this.height,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        images_upload_handler: (blobInfo, success, failure) => {
          const xhr = new XMLHttpRequest()
          xhr.withCredentials = false
          xhr.open('POST', this.imagesUploadUrl)
          xhr.onload = () => {
            if (xhr.status !== 200) {
              failure('HTTP Error: ' + xhr.status)
              return
            }
            const json = JSON.parse(xhr.responseText)
            if (!json || typeof json.data.url !== 'string') {
              failure('Invalid JSON: ' + xhr.responseText)
              return
            }
            success(json.data.url)
          }
          const formData = new FormData()
          formData.append('filename', this.fileName)
          formData.append(this.fileName, blobInfo.blob(), blobInfo.filename())
          xhr.send(formData)
        },
        paste_data_images: true
      },
      myValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = ''
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .tox .tox-dialog{
        z-index: 9999;
    }
</style>
